<template>
  <view class="pagetabs">
    <view class="pagetabs-head van-hairline--bottom">
      <view
        class="pagetabs-head-item"
        :class="currentTab==0?'active':''"
        data-current="0"
        @click="swichNav"
      >
        推荐
      </view>
      <view
        class="pagetabs-head-item"
        :class="currentTab==1?'active':''"
        data-current="1"
        @click="swichNav"
      >
        发现
      </view>
    </view>
    <swiper
      class="pagetabs-content"
      :current="currentTab"
      duration="300"
      @change="switchTab"
    >
      <swiper-item>
        <scroll-view
          :scroll-x="scroll.x"
          :scroll-y="scroll.y"
          class="scroll-container"
        >
          <van-cell-group
            @click="onClick"
            :custom-class="['van-cell-group-radius enroll-item',item.statusClass]"
            :border="false"
            v-for="(item, index) in list"
            :key="index"
          >
            <van-cell
              :icon="item.match.thumb"
              :title="item.match.name"
              :border="false"
              custom-class="enroll-item-head"
              v-if="item.match"
            >
              <view>未支付</view>
            </van-cell>
            <van-cell
              custom-class="enroll-item-body"
              :border="false"
            >
              <view slot="title">
                <view>报名项目：{{item.matchItem.name}}</view>
                <view>比赛时间：{{item.match.begintime}}</view>
                <view>比赛地点：{{item.match.host_place}}</view>
              </view>
              <price :value="item.cost" />
            </van-cell>
            <van-cell
              title="支付倒计时：01:29:49"
              class="enroll-item-foot"
              :border="false"
              center
            >
              <van-button
                size="small"
                round
                plain
              >取消</van-button>
              <van-button
                size="small"
                type="danger"
                round
                @click.stop="onPay"
              >支付</van-button>
            </van-cell>
          </van-cell-group>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view
          :scroll-x="scroll.x"
          :scroll-y="scroll.y"
          class="scroll-container"
        >
          <van-cell-group
            @click="onClick"
            :custom-class="['van-cell-group-radius enroll-item',item.statusClass]"
            :border="false"
            v-for="(item, index) in list"
            :key="index"
          >
            <van-cell
              :icon="item.match.thumb"
              :title="item.match.name"
              :border="false"
              custom-class="enroll-item-head"
              v-if="item.match"
            >
              <view>未支付</view>
            </van-cell>
            <van-cell
              custom-class="enroll-item-body"
              :border="false"
            >
              <view slot="title">
                <view>报名项目：{{item.matchItem.name}}</view>
                <view>比赛时间：{{item.match.begintime}}</view>
                <view>比赛地点：{{item.match.host_place}}</view>
              </view>
              <price :value="item.cost" />
            </van-cell>
            <van-cell
              title="支付倒计时：01:29:49"
              class="enroll-item-foot"
              :border="false"
              center
            >
              <van-button
                size="small"
                round
                plain
              >取消</van-button>
              <van-button
                size="small"
                type="danger"
                round
                @click.stop="onPay"
              >支付</van-button>
            </van-cell>
          </van-cell-group>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { formatTime } from '@/utils/index'
import Price from '@/components/price'
import PanelEnroll from '@/components/panel/enroll'
import { getEnrollList } from '@/api'
export default {
  components: {
    Price,
    PanelEnroll
  },

  data () {
    return {
      currentTab: 0, // 预设当前项的值
      list: [], // 列表数据
      page: 1, // 当前页数
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },

  created () {
    // wx.getSystemInfo({
    //   success: data => {
    //     console.log(data.pixelRatio)
    //     console.log(data.windowHeight)
    //     console.log(data.screenHeight)
    //   }
    // })
    // let logs
    // if (mpvuePlatform === 'my') {
    //   logs = mpvue.getStorageSync({ key: 'logs' }).data || []
    // } else {
    //   logs = mpvue.getStorageSync('logs') || []
    // }
    // this.logs = logs.map(log => formatTime(new Date(log)))
    console.log('enlist/index created')
  },
  beforeMount () {
    this.getList()
  },
  mounted () {
    // 创建节点选择器
    // var query = wx.createSelectorQuery()
    // // 选择id
    // query.select('#test').boundingClientRect()
    // query.exec(function (res) {
    //   // res就是 所有标签为mjltest的元素的信息 的数组
    //   console.log('enlist mounted', res)
    // })
  },
  methods: {
    // 滚动切换标签样式
    switchTab (e) {
      this.currentTab = e.mp.detail.current
    },
    // 点击标题切换当前页时改变样式
    swichNav (e) {
      var cur = e.mp.target.dataset.current
      if (this.currentTab === cur) {
        return false
      } else {
        this.currentTab = cur
      }
    },
    onClickViewEvent () {
      wx.navigateTo({
        url: '/pages/match/main?name=曹天骄&sex=男'
      })
      console.log('enlist onClickViewEvent')
    },
    onPay () {
      console.log('enlist onPay')
    },
    onClick () {
      // wx.navigateTo({
      //   url: '/pages/match/main?name=曹天骄&sex=男'
      // })
      console.log('enlist onClick')
    },
    upper () {
      console.log('enlist upper')
    },
    lower () {
      console.log('enlist lower')
    },
    scroll () {
      console.log('enlist scroll')
    },
    // 获取数据方法
    getList () {
      console.log('enlist getList')
      const that = this
      let params = {
        page: that.page // 传递页码
      }
      getEnrollList(params).then(res => {
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()
        // 返回的数据
        const data = res.data

        let itemCount = data.items.length
        if (itemCount > 0) {
          if (that.page > 1) {
            that.list.push(...data.items)
          } else {
            that.list = data.items
          }
        }
        that.meta = data.meta
      })
    },
    _getRegisterInfo () {
      wx.showLoading({
        title: '玩命加载中'
      })

      let logs
      if (mpvuePlatform === 'my') {
        logs = mpvue.getStorageSync({ key: 'logs' }).data || []
      } else {
        logs = mpvue.getStorageSync('logs') || []
      }
      let _logs = logs.map(log => formatTime(new Date(log)))
      let data = this.logs.concat(_logs)

      setTimeout(() => {
        this.logs = data
        wx.hideLoading()
      }, 1500)
    }
  },
  // 上拉加载
  onReachBottom: function () {
    // 执行上拉执行的功能
    if (this.meta.pageCount <= this.meta.currentPage) {
      console.log('数据加载完了')
    } else {
      // 下一页
      this.page = this.page + 1
      this.getList()
    }
  },
  // 停止下拉刷新
  async onPullDownRefresh () {
    // 初始化页码
    this.page = 1
    this.getList()
    console.log('下拉刷新')
    // to doing..
    // 停止下拉刷新
    wx.stopPullDownRefresh()
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.event-container {
  padding-top: 60px;
  position: relative;
  background: #f1f2f3;
  min-height: 100vh;
}
.scroll-container {
  padding: 10px;
}
.van-icon,
.van-icon::before {
  display: block !important;
}
.event-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.enroll-item {
  margin-bottom: 15px;
  .van-cell {
    padding: 10px;
    &__title {
      font-size: 12px;
    }
    &__value {
      font-size: 12px;
      flex: none;
      margin-left: 10px;
    }
  }
  ._van-cell + ._van-cell .van-cell {
    padding-left: 40px;
  }

  &-head.van-cell {
    .van-cell__title {
      font-size: 16px;
      font-weight: bold;
    }
    .van-cell__left-icon-wrap {
      align-items: flex-start;
      font-size: 20px;
      margin-right: 10px;
      .van-icon__image {
        margin-top: 3px;
        border-radius: 3px;
      }
    }
    .van-cell__value {
      font-size: 16px;
    }
  }
  &-body {
    .price {
      font-size: 10px;
    }
  }
  &-foot {
    .van-cell__value {
      ._van-button + ._van-button .van-button {
        margin-left: 5px;
      }
    }
  }

  &.enroll-cancel {
    .van-cell {
      color: #ccc;
      &__value {
        color: #ccc;
      }
      .van-icon__image {
        filter: grayscale(100%);
      }
    }
  }
}
.pagetabs {
  height: 100%;
  padding-top: 40px;
  box-sizing: border-box;
  &-head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    &-item {
      padding: 0 15px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      position: relative;
      &::after {
        height: 4px;
        border-radius: 4px;
        width: 20px;
        background: transparent;
        margin-left: -10px;
        position: absolute;
        left: 50%;
        bottom: 2px;
        content: "";
        display: block;
      }
      &.active {
        &::after {
          background: #4675f9;
        }
      }
    }
  }

  &-content {
    height: 100%;
    box-sizing: border-box;
    &-scroll {
      height: 100%;
    }
  }
}
</style>
